<script setup lang="ts">
import { reactive, readonly, ref, watch } from "vue"
import RoleInsert from "./roleInsert.vue"
import { SysRole } from "@/api/user/type/user"
import { rolePageApi, roleDelApi } from "@/api/user/role"
import { Delete, Search, Plus, Edit, View } from "@element-plus/icons-vue"
import UmCollapse from "@/components/Collapse/index.vue"
import Pagination from "@/components/Pagination/index.vue"
import RoleEdit from "./operation/role-edit.vue"

const roles = ref<SysRole[]>([] as SysRole[])
const roleInsertRef = ref()
const collapse = ref<boolean>(false)
const mode = ref<string>("notDel")
/** 维护选中的ID */
let selectRole: string[] = []
const roleTableRef = ref()
const total = ref<number>(0)
const pagination = ref({
  page: 1,
  size: 10
})

const showRole = (role: any) => {
  console.log(role)
}

const initData = (page: number, size: number) => {
  pagination.value.page = page
  pagination.value.size = size
  rolePageApi({
    page: pagination.value.page,
    size: pagination.value.size,
    mode: mode.value
  }).then((res) => {
    const { body } = res
    roles.value = body.content
    total.value = body.totalElements
  })
}

/** 父子联动，选中项的数据维护 */

const casingInitData = () => {
  initData(pagination.value.page, pagination.value.size)
}

const selectHander = (selection: SysRole[], row: SysRole) => {
  selectRole = selection.map((role) => role.id)
  if (row != null) {
    const filter = selectRole.filter((id) => id === row.id)
    toggle(row.child, filter.length > 0)
  } else {
    let excluse = [] as SysRole[]
    const flag = selection.length === roles.value.length
    for (let i = 0; i < roles.value.length; i++) {
      excluse = excluse.concat(children(roles.value[i].child))
    }
    /** 维护选中的ID */
    if (flag) {
      selectRole = selectRole.concat(excluse.map((role) => role.id))
    } else {
      /** 取消全选 */
      selectRole = []
    }
    excluse.forEach((roww) => roleTableRef.value.toggleRowSelection(roww, flag))
  }
}

const children = (child: SysRole[]): SysRole[] => {
  if (child == null) return []
  let result = child
  for (let i = 0; i < child.length; i++) {
    const u = children(child[i].child)
    result = result.concat(u)
  }
  return result
}

const toggle = (row: SysRole[], select: boolean) => {
  if (row == null) return
  const current = row
  for (let i = 0; i < current.length; i++) {
    roleTableRef.value.toggleRowSelection(current[i], select)
    /** 维护选中的ID */
    if (select) {
      selectRole.push(current[i].id)
    } else {
      const index = selectRole.indexOf(current[i].id)
      if (index >= 0) selectRole.splice(index, 1)
    }
    toggle(current[i].child, select)
  }
}

const deleteCommit = () => {
  roleDelApi(selectRole).then((res) => {
    const { code } = res
    if (code === 200) casingInitData()
  })
}

const openInsertDialog = () => {
  roleInsertRef.value.openDialog()
}

watch(mode, () => casingInitData())

casingInitData()

/** 修改 */
const roleEditRef = ref()
const roleEdit = reactive({
  role: {}
})
const edit = (row: SysRole) => {
  roleEdit.role = { ...readonly(row) }
  roleEditRef.value.open()
}
</script>

<template>
  <div class="role-box">
    <div class="operation">
      <um-collapse :display="collapse">
        <template #head>
          <el-button :icon="Search" @click="collapse = !collapse" circle />
          <el-button type="primary" :icon="Plus" @click="openInsertDialog" circle />
          <el-button type="danger" :icon="Delete" @click="deleteCommit" circle />
        </template>
        <template #default>
          <el-radio-group v-model="mode">
            <el-radio label="all" value="all">全部</el-radio>
            <el-radio label="notDel" value="notDel">未删除</el-radio>
            <el-radio label="isDel" value="isDel">已删除</el-radio>
          </el-radio-group>
        </template>
      </um-collapse>
    </div>
    <div class="content">
      <el-table
        ref="roleTableRef"
        @select="selectHander"
        @select-all="selectHander"
        :data="roles"
        row-key="id"
        :tree-props="{ children: 'child' }"
        border
        default-expand-all
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="450" />
        <el-table-column prop="role" label="角色" width="100" />
        <el-table-column prop="del" label="删除状态" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.del" type="danger">已删除</el-tag>
            <el-tag v-else type="success">未删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" />
        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot="scope">
            <el-button @click="showRole(scope.row)" type="primary" :icon="View" size="small" circle />
            <el-button @click="edit(scope.row)" type="primary" :icon="Edit" size="small" circle />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination :total="total" @handler="initData" ref="userPageRef" />
    </div>
    <RoleInsert ref="roleInsertRef" />
    <RoleEdit :role="roleEdit.role" ref="roleEditRef" />
  </div>
</template>

<style lang="scss" scoped>
.role-box {
  background-color: white;
  border-radius: 5px;

  .content {
    padding: 10px;
    :deep(.el-table) {
      .el-table-fixed-column--right {
        background-color: white;
      }
      .el-table-fixed-column--left {
        background-color: rgb(247, 250, 250);
      }
    }
  }
  .operation {
    padding: 10px;
    :deep(.el-row) {
      justify-content: end;
    }
  }
  .page {
    padding: 0 10px;
  }
}
</style>
